<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
    <style type="text/css">
        .wrapper {
            width: 600px;
            padding: 10px;
            height: 352px;
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid #d7d7d7
        }

        .wrapper .image-info {
            display: flex;
            align-items: center;
        }

        .wrapper .image-info .input {
            flex-grow: 1;
            display: flex;
        }

        .wrapper .image-info .input input {
            display: block;
            border: 1px solid #CCC;
            height: 23px;
            border-radius: 3px;
            flex-grow: 1;
            outline: none;
        }

        .wrapper .image-info .copy {
            width: 60px;
            cursor: pointer;
            margin: 0 5px;
        }

        .wrapper .image-info .copy div {
            height: 30px;
            font-size: 12px;
            line-height: 28px;
            cursor: pointer;
            border-radius: 4px;
            text-align: center;
            background-color: #F8F8F8;
            border: 1px solid #EEE;
        }

        .wrapper .image-info .action {
            width: 100px;
            cursor: pointer;
        }

        .wrapper .image-info .action .save-from-local {
            position: relative;
            height: 30px;
            font-size: 12px;
            line-height: 28px;
            cursor: pointer;
            border-radius: 4px;
            text-align: center;
            background-color: #F8F8F8;
            border: 1px solid #EEE;
        }

        .wrapper .image-info .action .save-from-local input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .wrapper .image-manual {
            background: #EEE;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            line-height: 2;
        }

        .wrapper .image-manual .title {
            font-weight: bold;
            font-size: 120%;
        }

        .wrapper .image-manual .body {
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="image-info">
        <div class="input">
            <input type="text" id="fileUrl"/>
        </div>
        <div class="copy">
            <div id="copyButton">复制路径</div>
        </div>
        <div class="action">
            <div class="save-from-local">
                <div>本地选择保存</div>
                <input type="file" id="saveFile" multiple=true/>
            </div>
        </div>
    </div>
    <div class="image-tip"></div>
    <div class="image-manual">
        <div class="title">
            Windows使用教程
        </div>
        <div class="body">
            <p>1、点击复制地址按钮</p>
            <p>2、点击本地选择文件，粘贴剪切板的路径到文件选择路径</p>
            <p>3、点击确定</p>
        </div>
        <div class="title">
            Mac使用教程
        </div>
        <div class="body">
            <p>1、点击复制地址按钮</p>
            <p>2、点击本地选择文件，按快捷 Command+Shift+G ，粘贴剪切板的路径到文件选择路径</p>
            <p>3、点击确定</p>
        </div>
    </div>
</div>
<script src="../../third-party/jquery-1.10.2.js?25f4b625"></script>
<script src="../../third-party/webuploader/webuploader.js?2e7e9092"></script>
<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?bae63983"></script>
<script type="text/javascript" src="wordimage.js?94055851"></script>
<script type="text/javascript">
    editor.setOpt({
        wordImageFieldName: "upfile",
        compressSide: 0,
        maxImageSideLength: 900
    });
    //全局变量
    var imageUrls = [],          //用于保存从服务器返回的图片信息数组
        selectedImageCount = 0,  //当前已选择的但未上传的图片数量
        optImageUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
        optImageFieldName = editor.getOpt('imageFieldName'),
        optImageCompressBorder = editor.getOpt('imageCompressEnable') ? editor.getOpt('imageCompressBorder') : null,
        maxSize = editor.getOpt('imageMaxSize') / 1024 / 1024,
        extension = editor.getOpt('imageAllowFiles').join(';').replace(/\./g, '*.');

    /* 添加额外的GET参数 */
    var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
        urlWidthParams = optImageUrl + (optImageUrl.indexOf('?') == -1 ? '?' : '&') + params;

    var uploader,
        actionUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
        acceptExtensions = (editor.getOpt('imageAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''),
        imageMaxSize = editor.getOpt('imageMaxSize'),
        imageCompressBorder = editor.getOpt('imageCompressBorder');
    uploader = WebUploader.create({
        accept: {
            title: 'Images',
            extensions: acceptExtensions,
            mimeTypes: 'image/*'
        },
        swf: '../../third-party/webuploader/Uploader.swf',
        server: actionUrl,
        fileVal: editor.getOpt('imageFieldName'),
        duplicate: true,
        fileSingleSizeLimit: imageMaxSize,    // 默认 2 M
        threads: 1,
        compress: editor.getOpt('imageCompressEnable') ? {
            width: imageCompressBorder,
            height: imageCompressBorder,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 90,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 是否保留头部meta信息。
            preserveHeaders: true
        } : false
    });
    uploader.on('uploadSuccess', function (file, res) {
        if ('state' in res) {
            if (res.state === 'SUCCESS') {
                if (res.url) {
                    imageUrls.push({
                        name: file.name,
                        url: res.url,
                        title: '',
                    });
                    $('.image-tip').html('<span style="color:#139213;">图片' + imageUrls.length + '(' + file.name + ')' + '转存成功</span>');
                } else {
                    $('.image-tip').html('上传失败:' + JSON.stringify(res))
                }
                // 触发上传附件事件
                editor.fireEvent("uploadsuccess", {
                    res: res,
                    type: 'image'
                });
            } else {
                $('.image-tip').html('上传失败:' + JSON.stringify(res))
            }
        } else {
            $('.image-tip').html('上传失败:' + JSON.stringify(res))
        }
    });
    uploader.on('uploadFinished', function () {
        $('.image-tip').html('<span style="color:#139213;">转存成功，请提交确认</span>');
    });
    utils.domReady(function () {
        var options = {};
        var callbacks = {};
        wordImage.init(options, callbacks);
    });
</script>

</body>
</html>
